<!--
 * @Author: wangding
 * @Date: 2020-11-05 14:07:23
 * @LastEditTime: 2020-11-09 12:22:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-inverter\batteryAnalysis.vue
-->
<template>
    <div class="battery-echarts-mian-box">
        <div class="battery-tabs-head-box">
            <div @click='changeActive(1)' class="tabs-button" :class='active==1?"active":""'>{{$t('batteryAnalysis.showStatus')}}</div>
            <div @click='changeActive(2)' class="tabs-button" :class='active==2?"active":""'>{{$t('batteryAnalysis.showHistory')}}</div>
            <div @click='changeActive(3)' class="tabs-button" :class='active==3?"active":""'>{{$t('batteryAnalysis.showWarning')}}</div>
            <div @click='changeActive(4)' class="tabs-button" :class='active==4?"active":""'>{{$t('batteryAnalysis.versionInformation')}}</div>
        </div>
        <div class="content-box">
            <div v-if='active == 1? true:false'>
                <statusTab ref="bat-tab-1"></statusTab>
            </div>
            <div v-if='active == 2? true:false'>
                <historyTab ref="bat-tab-2"></historyTab>
            </div>
            <div v-if='active == 3? true:false'>
                <errorMsg ref="bat-tab-3"></errorMsg>
            </div>
            <div v-if='active == 4? true:false'>
                <edition ref="bat-tab-4"></edition>
            </div>
        </div>
    </div>
</template>

<script>
import statusTab from './batteryViews/status'
import historyTab from './batteryViews/history'
import errorMsg from './batteryViews/errorMsg'
import edition from './batteryViews/edition'
export default {
    components: {
        statusTab,
        historyTab,
        errorMsg,
        edition
    },
    props: {

    },
    data() {
        return {
            active:1
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    methods: {
        initPage(){
            this.$refs["bat-tab-"+this.active].initPage()
        },
        changeActive(val){
            this.active = val
        }
    },
};
</script>

<style  lang="less" scoped>
.battery-echarts-mian-box{
    height: 100%;
    .battery-tabs-head-box{
        display: flex;
        .tabs-button{
            cursor: pointer;
            border: 1px solid #ddd;
            padding: 5px 8px;
            margin-right: 10px;
            border-radius: 4px;
            background-color: #fff;
        }
        .active{
            background-color: #ddd;
        }
        
    }
    .content-box{
        margin-top:10px;
        height: 100%;
    }
}
</style>
